<script lang="ts" setup>
import NoDataView from './NoDataView.vue'

const props = defineProps({
  relative: {
    type: Boolean,
    default: false
  },
  noData: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div :class="['box-container',relative?'box-container-rel':'box-container-abs']">
    <slot name="back">
      <no-data-view v-if="noData" />
    </slot>
    <el-scrollbar height="100%" style="width:100%;">
      <slot />
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">

  .box-container-rel{
    width:100%;
    height:100%;
    flex:auto;
    position:relative;
  }
  .box-container-abs{
    @include abs-group();
  }
  .box-container{
    overflow: hidden;
    box-sizing: border-box;
  }
</style>
